<template>
  <div class="page" >

    <div class="" style="">
      <!--  头部导航 s-->
      <!--<div class="app-head">-->
      <!--  <home-header :userinfo="userInfo"></home-header>-->
      <!--</div>-->
      <!--  头部背景图 s-->
      <div class="top_header top_header_backimg">
      </div>
      <!--登录方式 s-->
      <div  class="container top_right fr ">
        <div class="top_right_box2 cursor">
          <div class="top_colum">
            <div class="top_row_left">
              <div><img class="wxmin" src="../../../assets/imgs/wxmin.jpg"></div>
              <div class="m_top_10">微信扫码登陆</div>
            </div>
            <div class="top_row_right">
              <div class=" font_14">学生账号登录</div>
              <div class="itemd color_92bff6" @click="clickdialogFormVisible('smslogin')" data-visible="smslogin">
                  <img  src="../../../assets/img/duanxin.png">
                  <span class="text"  >短信登录</span>
              </div>
              <div class="itemd" @click="clickdialogFormVisible('codelogin')">
                <img  src="../../../assets/img/login.png">
                <span class="text" >密码登陆</span>
              </div>
              <div class="itemd">
                <img  src="../../../assets/img/icon_login_weibo_normal.d627ffb.png">
                <span class="text" >微博登陆</span>
              </div>
              <div class="itemd">
                <img  src="../../../assets/img/qqicon.png">
                <span class="text" >QQ登陆</span>
              </div>
            </div>
          </div>
          <div >
          <!-- 显示登录弹窗-->
          <el-dialog class="loginarea" title="登录" :append-to-body="true"
                     :visible.sync="dialogFormVisible" width="35%">
            <log-dialog ></log-dialog>
          </el-dialog>
          </div>

        </div>
      </div>
      <!-- 日期-->
      <div class="top-bar index" >
        <div class="container flex-row flex-jsb flex-ac" >
          <div class="calendar-wrap" >
            <div class="calendar-left" v-model="today" >
              <div class="calendar-month">{{ today[1] }}</div>
              <div class="calendar-day" >{{ today[2] }}</div>
            </div>
            <div class="calendar-right" >
            <!--  <div class="nodata" >好耶~今日暂无日程</div>-->
              <div class="nodata" >
                <div  class="calendar-item">
                  <img  src="../../../assets/img/order1.png" alt="" class="calendar-icon">
                  <span  class="calendar-text">ACCA职业嘉年华企业宣讲会第一场 </span>
                </div>
                <div  class="calendar-item">
                  <img  src="../../../assets/img/order2.png" alt="" class="calendar-icon">
                  <span  class="calendar-text">ACCA职业嘉年华企业宣讲会第一场 </span>
                </div>
                <div  class="calendar-item">
                  <img  src="../../../assets/img/order3.png" alt="" class="calendar-icon">
                  <span  class="calendar-text">ACCA职业嘉年华企业宣讲会第一场 </span>
                </div>
              </div>
            </div>
          </div>
          <!-- 搜索-->
          <div class="search-bar" >
            <div class="search-bar_box" >
              <div class="user-count-num" >
                共计
                  <template v-for="n in 8" v-if="n <= 8-hotNum.length">
                    <span style="background-position:0 -176.5px;" ></span>
                  </template>
                  <template v-for="(item,i) in hotNum" v-model="hotNum[i]">
                    <span v-if="hotNum[i] == 9" :style="'background-position:0 -' + 352.5 + 'px'" ></span>
                    <span v-else-if="hotNum[i] == 8" :style="'background-position:0 -' + 332.5 + 'px'" ></span>
                    <span v-else-if="hotNum[i] == 7" :style="'background-position:0 -' + 313 + 'px'" ></span>
                    <span v-else-if="hotNum[i] == 6" :style="'background-position:0 -' + 293.5 + 'px'" ></span>
                    <span v-else-if="hotNum[i] == 5" :style="'background-position:0 -' + 274 + 'px'" ></span>
                    <span v-else-if="hotNum[i] == 4" :style="'background-position:0 -' + 254.5 + 'px'" ></span>
                    <span v-else-if="hotNum[i] == 3" :style="'background-position:0 -' + 235 + 'px'" ></span>
                    <span v-else-if="hotNum[i] == 2" :style="'background-position:0 -' + 215.5 + 'px'" ></span>
                    <span v-else-if="hotNum[i] == 1" :style="'background-position:0 -' + 196 + 'px'" ></span>
                    <span v-else-if="hotNum[i] == 0" :style="'background-position:0 -' + 176.5 + 'px'" ></span>
<!--                    <span v-else :style="'background-position:0 -' + (176.5) + 'px'" ></span>-->
                  </template>
                个热门职位
              </div>
              <div class="search " >
                  <!-- 搜索框-->
                  <div style="margin-top: 10px;">
                    <el-input class="input-with-select elinput"  placeholder="请输入内容" v-model="input3">
                      <el-select class="elselect"   v-model="select" slot="prepend" placeholder="实习..." >
                        <el-option label="实习" value="1"></el-option>
                        <el-option label="校招" value="2"></el-option>
                        <el-option label="公司" value="3"></el-option>
                      </el-select>
                      <el-button class="btnsearch"  @click="handleToNewTab('interns')" slot="append" >搜索</el-button>
                    </el-input>
                  </div>
              </div>
              <div class="hot-key-wrap" >
                <span>热门搜索：</span>
                <!-- <a href="#" >热门搜索：</a>-->
                <a href="#" v-for="(item,idx) in hotSearchList" :key="idx"
                   @click="handleSearch('市场')" >{{ item.name}}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 全部分类 title s-->
      <div class="container " style="z-index: 1" >
        <div class="mid-bar" style="" >
         <!-- 类别-->
          <div class="intern-type"  style="z-index: 1;">
                <div class="type-head flex-row-index"  >
                  <div class="btns flex-row-index" s >
                    <el-tabs class="deepCtrl" v-model="activeName" type="" style="width:260px;">
                      <el-tab-pane disabled=""   name="zore">
                        <span slot="label" >全部分类</span>
                      </el-tab-pane>
                       <!-- 左边父类内容-->
                      <el-tab-pane  name="first" >
                        <span slot="label"><i class="el-icon-arrow-left"></i></span>
                        <div class="type-item" v-if="index <= 7" v-for="(item,index) in validIndustryList"
                             @mouseover="setActive(index)"  @mouseleave="setInactive(index)"
                             :class="{active: isActive(index)}" :key="index" style="">
                              <a class="type-item-first" @click="handleSearch(item.industrybase['industryName'])">
                                {{item.industrybase['industryName']}} </a> <!--互联网IT-->
                              <a class="type-item-sub" v-for="(sub,subidx) in item.dutyTypeList" :key="subidx"
                                 @click="handleSearch(sub.dutytypebase['dutyTypeName'])">
                                <span v-if="subidx < 2 ">{{sub.dutytypebase['dutyTypeName']}} </span></a><!--产品-->
                              <!-- 鼠标悬停显示项  s-->
                            <template>
                             <div class="type-list" :id="idx+(index)" :style="{display:displayStyle}">
                               <div class="" v-for="(sub,index2) in item.dutyTypeList" :key="index2">
                                 <a class="text first-text" @click="handleSearch(sub.dutytypebase['dutyTypeName'])" >
                                   {{sub.dutytypebase['dutyTypeName']}}</a>
                                 <a class="text"  v-for="(sub2,subidx) in sub.dutyList" :key="subidx"
                                    @click="handleSearch(sub2['dutyName'])">
                                   {{sub2['dutyName']}} </a>
                               </div>
                             </div>
                            </template>
                        </div>
<!--                          <category-sublist :class="{typeitem__hover:isShowHover}"></category-sublist>-->
                      </el-tab-pane>
                      <!--  右边内容-->
                      <el-tab-pane name="second">
                        <span slot="label"><i class="el-icon-arrow-right"></i></span>
                        <div class="type-item" v-if="index > 7 " v-for="(item,index) in validIndustryList"
                             @mouseover="setActive(index)"  @mouseleave="setInactive(index)"
                             :class="{active: isActive(index)}" :key="index" style="">
                          <a class="type-item-first" @click="handleSearch(item.industrybase['industryName'])">
                            {{item.industrybase['industryName']}} </a>
                          <a class="type-item-sub" v-for="(item2,index2) in item.dutyTypeList" :key="index2"
                             @click="handleSearch(item2.dutytypebase['dutyTypeName'])">
                            <span v-show="index2 < 2" >{{item2.dutytypebase['dutyTypeName']}}</span>
                          </a>
                          <!-- 鼠标悬停显示项  s-->
                          <template>
                            <div class="type-list" :id="idx+(index)" :style="{display:displayStyle}">
                              <div class="" v-for="(sub,index2) in item.dutyTypeList" :key="index2">
                                <a class="text first-text" @click="handleSearch(sub.dutytypebase['dutyTypeName'])" >
                                  {{sub.dutytypebase['dutyTypeName']}}</a>
                                <a class="text"  v-for="(sub2,subidx) in sub.dutyList" :key="subidx"
                                @click="handleSearch(sub2['dutyName'])">
                                  {{sub2['dutyName']}} </a>
                              </div>
                            </div>
                          </template>
                        </div>

                      </el-tab-pane>
                    </el-tabs>
                  </div>
                </div>
            <!--  <div class="type-item__hover" style=""> hover show</div>-->
            <!--  <template v-slot:catergories>template</template>-->
                <div class="catergories" >
    <!--              <div v-for="" class="type-item" >-->
    <!--                <a class="type-item-first" >互联网IT</a>-->
    <!--                <a class="type-item-sub" ><span >产品</span> &lt;!&ndash;&ndash;&gt;</a>-->
    <!--                <a class="type-item-sub" ><span >运营</span> &lt;!&ndash;&ndash;&gt;</a>-->
    <!--                <a class="type-item-sub" ><span >技术管理</span> &lt;!&ndash;&ndash;&gt;</a>-->
    <!--                <a class="type-item-sub" >&lt;!&ndash;&ndash;&gt;</a>-->
    <!--                <a class="type-item-sub" >&lt;!&ndash;&ndash;&gt;</a>-->
    <!--                <a class="type-item-sub" >&lt;!&ndash;&ndash;&gt;</a>-->
    <!--                <a class="type-item-sub" >&lt;!&ndash;&ndash;&gt;</a>-->
    <!--                <a class="type-item-sub"></a>-->
    <!--                <a class="type-item-sub" >&lt;!&ndash;&ndash;&gt;</a>-->
    <!--                <a class="type-item-sub"></a>-->
    <!--                &lt;!&ndash; 鼠标悬停显示项 s&ndash;&gt;-->
    <!--                <div class="type-list" style="display:none;" >-->
    <!--                  <div >-->
    <!--                    <a class="first-text text" >产品</a>-->
    <!--                    <a class="text" >产品</a>-->
    <!--                    <a class="text" >产品经理</a>-->
    <!--                    <a class="text" >产品助理</a>-->
    <!--                    <a class="text" >产品设计</a>-->
    <!--                    <a class="text" >产品项目管理</a>-->
    <!--                    <a class="text" >用户研究</a>-->
    <!--                  </div>-->
    <!--              </div>-->
                </div>
          </div>
          <!-- 轮播图 s-->
          <div class="carousel_area" style="display:block;">
            <template>
              <carousel-img></carousel-img>
            </template>
          </div>
        </div>

      </div>
      <!-- company-item 公司 s-->
      <div class="container" style="z-index: 3">
        <div  class="company-area" style="" >
          <a v-for="(item,index) in companyList" :key="index" class="company-item has-item"
             style="text-decoration: none;color: #666;">
<!--            <img  class="hideimg" src="../../../assets/imgs/hongshang.jpg" style="width: 50px;height: 50px;margin-top: 6px" >-->
             <img class="hideimg" :src="tempimg" style="width: 50px;height: 50px;margin-top: 6px" >
            <div >
              <!--                <div  class="com-logo" style="background-image: url();"></div>-->
              <p  class="com-name">{{ item.simpleName }}</p>
            </div>
            <div  class="company-t company-common">{{ item.simpleName }}</div>
            <div  class="company-d company-common">{{ item.simpleName }}联合校招</div>
          </a>
          <a   class="company-item has-item" style="text-decoration: none;color: #666;">
              <img  class="hideimg" style="width: 50px;height: 50px;margin-top: 6px" src="../../../assets/imgs/weilai.png" >
              <div >
<!--                <div  class="com-logo" style="background-image: url();"></div>-->
                <p  class="com-name">蔚来</p>
              </div>
              <div  class="company-t company-common">蔚来</div>
              <div  class="company-d company-common">蔚来联合校招</div>
            </a>
        </div>
<!--        <div v-for="" v-show="isShow" @mouseover.stop="containerActive" @mouseleave="setcontainerActive" class="showhover" style="">-->
<!--          <a href="#"></a>-->
<!--        </div>-->
      </div>
      <div style="margin-bottom:20px;"> </div>
      <!-- company-item e-->
      <!-- 热门职位-->
      <div class="container" style="z-index: 3">
        <!--  查看更多职位-->
        <div class="checkjob" style="">
          <div class="checkjob_item">
            <el-checkbox-group @change="selectCheckList" v-model="checkList">
              <el-checkbox label="实习职位"></el-checkbox>
              <el-checkbox label="校招职位"></el-checkbox>
            </el-checkbox-group>
            <div class="checkjob_more">
              <span @click="handleToNewTab('interns')"><a>查看更多职位</a></span>
                <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
        <!--  热门职位/最新职位 -->
        <el-tabs v-model="activeHotName"  class="tabs" >
          <el-tab-pane :label="item.name" :name="item.selectname" v-for="item in positionName" :key="item">
            <!-- 职位 s-->
            <div style="font-size: 10px">{{item.name}}</div>
            <div class="tmpbk " role="tabpanel" aria-labelledby="home-tab">
              <div  class="jboarea mt_30">
                <!-- 职位渲染-->
                <div v-for="(item,index) in JobList" class="jbobox" :key="index">
                  <div class=" jbobox_up">
                    <div class="jbobox_up1">
                      <span>{{item.jobName}} </span> <span class="color_red8150" >{{ item.minDailyWage }}-{{ item.maxDailyWage }}/天</span>
                    </div>
                    <div class="jbobox_up2">
                      <span>{{ item.industryName }}</span> <span>导师制</span> <span>接受{{ item.degree }} </span><span>...</span>
                    </div>
                    <div class="jbobox_up3">
                      <span>{{ item.address }}</span> <span>5天/周</span> <span>{{ item.workTime }}</span>
                    </div>
                  </div>
                  <div class="jbobox_dw">
                    <div class="jbobox_dw1">
                      <img :src="tempimg"> </div>
                    <div class="jbobox_dw2">
                      <div class="dw">{{ item.companyName }}</div>
                      <!--                      <div>互联网/游戏/软件 丨已上市</div>-->
                      <div>{{ item.description }}</div>
                    </div>
                  </div>
                </div>
                <div v-for="n in 2" class="jbobox" style="display: block">
                  <div class=" jbobox_up">
                    <div class="jbobox_up1">
                      <span>建筑设计师{{n}}-临时名 </span> <span class="color_red8150" >8k-12k/月</span>
                    </div>
                    <div class="jbobox_up2">
                      <span>带薪年假</span> <span>免费三餐</span> <span>绩效奖金 </span><span>...</span>
                    </div>
                    <div class="jbobox_up3">
                      <span>嘉兴</span> <span>本科</span> <span>3个月</span>
                    </div>
                  </div>
                  <div class="jbobox_dw">
                    <div class="jbobox_dw1"><img src="../../../assets/imgs/jd.jpg"> </div>
                    <div class="jbobox_dw2">
                      <div class="dw">万科</div>
                      <div>
                        房产/家居/物业/建筑 丨2000人以上</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <div>
<!--          <el-tab-pane label="热门职位" name="hotjob">-->
<!--            &lt;!&ndash;  最新职位 s&ndash;&gt;-->
<!--            <div class="tmpbk " role="tabpanel" aria-labelledby="home-tab">-->
<!--              <div  class="jboarea mt_30">-->
<!--                &lt;!&ndash; 职位渲染&ndash;&gt;-->
<!--                <div v-for="(item,index) in JobList" class="jbobox" :key="index">-->
<!--                  <div class=" jbobox_up">-->
<!--                    <div class="jbobox_up1">-->
<!--                      <span>{{item.jobName}} </span> <span class="color_red8150" >{{ item.minDailyWage }}-{{ item.maxDailyWage }}/天</span>-->
<!--                    </div>-->
<!--                    <div class="jbobox_up2">-->
<!--                      <span>{{ item.industryName }}</span> <span>导师制</span> <span>接受{{ item.degree }} </span><span>...</span>-->
<!--                    </div>-->
<!--                    <div class="jbobox_up3">-->
<!--                      <span>{{ item.address }}</span> <span>5天/周</span> <span>{{ item.workTime }}</span>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  <div class="jbobox_dw">-->
<!--                    <div class="jbobox_dw1">-->
<!--                      <img :src="tempimg"> </div>-->
<!--                    <div class="jbobox_dw2">-->
<!--                      <div class="dw">{{ item.companyName }}</div>-->
<!--                      &lt;!&ndash;                      <div>互联网/游戏/软件 丨已上市</div>&ndash;&gt;-->
<!--                      <div>{{ item.description }}</div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div v-for="n in 2" class="jbobox" style="display: block">-->
<!--                  <div class=" jbobox_up">-->
<!--                    <div class="jbobox_up1">-->
<!--                      <span>建筑设计师{{n}}-临时名 </span> <span class="color_red8150" >8k-12k/月</span>-->
<!--                    </div>-->
<!--                    <div class="jbobox_up2">-->
<!--                      <span>带薪年假</span> <span>免费三餐</span> <span>绩效奖金 </span><span>...</span>-->
<!--                    </div>-->
<!--                    <div class="jbobox_up3">-->
<!--                      <span>嘉兴</span> <span>本科</span> <span>3个月</span>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  <div class="jbobox_dw">-->
<!--                    <div class="jbobox_dw1"><img src="../../../assets/imgs/jd.jpg"> </div>-->
<!--                    <div class="jbobox_dw2">-->
<!--                      <div class="dw">万科</div>-->
<!--                      <div>-->
<!--                        房产/家居/物业/建筑 丨2000人以上</div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane label="最新职位" name="newjob">-->
<!--            &lt;!&ndash;  热门职位 s&ndash;&gt;-->
<!--            <div class="jboboxcard" role="tabpanel" aria-labelledby="home-tab" id="" >-->
<!--              <div  class="jboarea mt_30">-->
<!--                <div v-for="(item,index) in JobList" class="jbobox" :key="index">-->
<!--                  <div class=" jbobox_up">-->
<!--                    <div class="jbobox_up1">-->
<!--                      <span>{{item.jobName}} </span> <span class="color_red8150" >{{ item.minDailyWage }}-{{ item.maxDailyWage }}/天</span>-->
<!--                    </div>-->
<!--                    <div class="jbobox_up2">-->
<!--                      <span>{{ item.industryName }}</span> <span>导师制</span> <span>接受{{ item.degree }} </span><span>...</span>-->
<!--                    </div>-->
<!--                    <div class="jbobox_up3">-->
<!--                      <span>{{ item.address }}</span> <span>5天/周</span> <span>{{ item.workTime }}</span>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  <div class="jbobox_dw">-->
<!--                    <div class="jbobox_dw1"><img src="../../../assets/imgs/jd.jpg"> </div>-->
<!--                    <div class="jbobox_dw2">-->
<!--                      <div class="dw">{{ item.companyName }}</div>-->
<!--&lt;!&ndash;                      <div>互联网/游戏/软件 丨已上市</div>&ndash;&gt;-->
<!--                      <div>{{ item.description }}</div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-tab-pane>-->
          </div>
        </el-tabs>
        <!-- 更多职位-->
        <div class="more" style="text-align: center;">
          <el-row>
            <el-button @click="handleToNewTab('interns')"
              style="width: 170px;height: 46px; margin: 30px 0 90px 0; " type="primary" >
              更多职位</el-button>
          </el-row>
        </div>
      </div>
      </div>

  </div>
</template>

<script>
/* eslint-disable  */
import zanwuimg from '@/assets/img/zanwuimg.jpg'
import homeHeader from '@/views/components/common/home-header'
import LogDialog from '@/views/components/common/log_dialog'
import router from '@/router'
import CategorySublist from '@/views/components/common/category-sublist'
import CarouselImg from '@/views/components/common/carousel-img'
export default {
  name: 'index',
  components: {
    CarouselImg,
    CategorySublist,
    LogDialog,
    homeHeader
  },
  props: {
    propsuserinfo: {
      type: Object
    }
  },
  data () {
    return {
      // 全部类别
      validIndustryList:[],
      validIndustryList_Sub:[],
      categoryArr: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
        { id: 4, text: 'Item 4' }
      ],
      activeItem: null,
      displayStyle:'none',
      idx:'idx-',
      tempimg:zanwuimg,
      hover: true,
      companyList:[],
      input1: '',
      input2: '',
      input3: '',
      // 用户登录
      dialogTableVisible: false,
      dialogFormVisible: false,
      // 默认展示短信登录
      // loginActiveName: 'smslogin',
      eltabsActiveName: 'smslogin',
      // eltabsActiveName: 'codelogin',
      // 全部分类
      activeName: 'first',
      // hoverIndex: -1,
      select: '',
      // 用户中心
      userInfo: this.propsuserinfo,
      // userInfo: {
      //   avatarurl:'',
      //   phone:'',
      //   token: '',
      //   userId:''
      // },
      // 热门职位搜索
      hotSearchList:[
        {id:1,name:'市场'},
        {id:1,name:'银行'},
        {id:1,name:'财会'},
        {id:1,name:'运营'},
        {id:1,name:'新媒体'},
        {id:1,name:'UI设计'},
        {id:1,name:'行政'},
        {id:1,name:'项目'}
      ],
      // 热门职位/默认项
      activeHotName: 'hotjob',
      positionName:[
        {id:1,name:'热门职位',selectname:'hotjob'},
        {id:1,name:'最新职位',selectname:'newjob'},
        {id:1,name:'推荐职位',selectname:'recommjob'}
      ],
      JobList: [],
      // checkList: ['实习职位', '其它']
      checkList: ['实习职位'],
      checkOptions:[],
      today:'',
      hotNum: [],
      arrleg:8
    }
  },
  created () {

    this.init()
  },
  mounted () {
    // this.getAllDutyList()
    this.getDate()
  },
  methods: {
    // 初始化
    init(){
      this.localStorageGetAllDutyList()
      this.getvalidIndustryList_Sub()
      // this.getFatheruserinfo()
      this.getJobListByCompany()
      // console.log('tempimg',this.tempimg)
      this.getAllJobList()
      this.getAllCompanyList()
    },
    getDate() {
       new Date().toDateString();// "Tue Sep 26 2023"
      this.today = new Date().toDateString().split(" ")
    },
    // getFatheruserinfo(){
    //   console.log('propsuserinfo: ',this.propsuserinfo)
    //   this.userInfo = this.propsuserinfo
    // },
    // 查询所有公司
    getAllCompanyList(){
      let params = {
        token: this.propsuserinfo.token,
        userid: this.propsuserinfo.userId
      }
      this.$http.getAllCompanyList(params).then( res =>{
        this.companyList = res.data.companyList
      })
    },
    //
    getJobListByCompany(){
      let params = {
        token: this.propsuserinfo.token,
        userid: this.propsuserinfo.userId,
        companyuserid:3,
        jobtype:0
      }
      this.$http.getJobListByCompany(params).then( res =>{
        // this.JobList = res.data.
      })
    },
    // 查询所有职位
    getAllJobList() {
      let params = {
        token: this.propsuserinfo.token,
        userid: this.propsuserinfo.userId
      }
      this.$http.getAllJobList(params).then( res =>{
        this.JobList = res.data.jobList
        // let num =res.data.jobList.length
        let num = 889966
        let num2 =  num.toString()
        for (let i= 0;i <= num2.length-1;i++){
          this.hotNum.push(num2[i])
        }
        // console.log('所有职位',res.data.jobList)
      })
    },
    //
    handleSearch(searchName) {
      let newPage = this.$router.resolve({
        path:'interns',
        query: { searchName }
      })
      window.open(newPage.href,'_blank')

      // window.open(this.$router.resolve({name: 'interns',params:{searchName:catName}}).href, '_blank')
      // 接收 this.$route.params.searchName
      // alert(catName)

    },
    // 登录选项事件
    clickdialogFormVisible (tname) {
      this.dialogFormVisible = !this.dialogFormVisible;
      this.eltabsActiveName = tname;
    },
    // 跳转新页面
    handleToNewTab(routerName) {
      window.open(this.$router.resolve({name: routerName}).href, '_blank')
      // this.$router.push({name:routerName})
    },
    // hover 事件
    mouseOver: function () {
      this.active = 'background-color: #ccc'
    },
    mouseLeave: function () {
      this.active = ''
    },
    enter: function (i) {
      if (this.imgindex === i) {
        this.imgindex = -1
      } else {
        this.imgindex = i
      }
    },
    out: function (i) {
      this.imgindex = -1
    },
    // 本地获取 DutyList 类别
   localStorageGetAllDutyList(){
      const IndustryList = JSON.parse( localStorage.getItem('IndustryList'))
      // JSON.stringify(object) //对象转换为JSON格式字符串
      // JSON.parse(jsonString);
      if (IndustryList != null) {
        this.validIndustryList = ''
        this.validIndustryList = IndustryList
      }else {
        this.getAllDutyList()
      }
    },
    //分类 title
   getvalidIndustryList_Sub(){
     let subTitle = []
     let temp = this.validIndustryList
     this.validIndustryList.forEach( (res,i) =>{
       if (res != null){
         subTitle.push(res.dutyTypeList)
       }
     })
     // for (var i = 0; i <= subTitle.length;i++){
     //   if (temp[i] != null){
     //     console.log('item: ',temp[i].dutyTypeList)
     //   }
     // }
       this.validIndustryList_Sub = subTitle
   },
   getAllDutyList(){
     let params = {
       token: this.propsuserinfo.token,
       userid: this.propsuserinfo.userId
     }
       this.$http.getAllDutyList(params).then(res => {
        this.validIndustryList = res.data.validIndustryList
         localStorage.setItem('IndustryList', JSON.stringify(res.data.validIndustryList))
      })
      alert('是否登录！ 去登陆')
    },
    // isActive1(item) {
      // console.log(item)
      // return this.companyArr[item] === item;
    // },
    // 实习职位
    selectCheckList(val) {
      this.checkOptions = val
      // console.log(this.checkOptions)
    },
    setActive(index) {
      this.activeItem = index
      let d = document.getElementById('idx-'+index)
      d.style.display ='block'
    },
    setInactive(index) {
      this.activeItem = null
      let d = document.getElementById('idx-'+index)
      d.style.display ='none'
    },
    // 全部类别 hover
    isActive(item) {
      return this.activeItem === item
    }

  }
}
</script>

<style scoped>

.icon_bg,
.icon_view_bg{ color: #252527;}
.showhover{
  position:relative;
  height: 90px;
  width: 90px;
  opacity: .5;
}
.hoverBg{
  /* background: red; */
  /* background: #ccc; */
  color: #fff;
}
.hiddenhover{
  display:none;
}
html,
body {
  background: #F8F8FA;
  font-size: 14px;
  color: #252527;
  /*overflow: hidden;*/
}

.center {
  width: 1080px;
  margin: 0 auto;
}
/* 头部导航 */
.home-head,
.app-head{
  height: 56px;
}
.header {
  width: 100%;
  height: 56px;
  background: #fff;
  position: relative;
  border-bottom: solid 1px #eaeaea;
}
.header .container {
  height: 56px;
  width: 1080px;
  margin: 0 auto;
  position: relative;
  z-index: 1999;
  background: #fff;
}
.header .container .logo {
  margin-right: 40px;
  width: 101px;
  background: url(../../../assets/imgs/logo-shixiseng.ea8da47.png) no-repeat 0 14px;
  background-size: 100%
}
.header .container .nav-item {
  line-height: 56px;
  height: 56px;
  float: left;
}
.header .container .oneLevel-page:hover {
  color: #6aa2e4;
}
.header .container .oneLevel-page.active {
  color: #6aa2e4;
}
.header .container ul {
  display: inline-block;
  padding: 0;
  margin: 0;
  /*font-size: 0;*/
  list-style: none;
  vertical-align: top;
}
.header .container ul li {
  list-style: none;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  margin: 0;
  margin-right: 32px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  transition: all 0.4s;
}
.header .container ul li:nth-last-of-type(1) {
  margin-right: 0;
}
.header .container ul li.city-address {
  color: #6aa2e4;
  cursor: pointer;
}
.header .container ul li.city-address .change-text {
  font-size: 14px;
  color: #4c4c4e;
}
.header .container ul li a {
  color: #4c4c4e;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.header .resume-level .rank-pannel .rank img {
  width: 10px;
}
.header .resume-level .rank-pannel .close img {
  width: 14px;
}
.header .xyz i {
  width: 25px;
  height: 20px;
  display: inline-block;
  position: absolute;
  right: -20px;
  top: 4px;
  background: url(../../../assets/imgs/icon-new.fd1130a.svg) no-repeat;
  background-size: 100%
}
.header .qb i {
  width: 25px;
  height: 20px;
  display: inline-block;
  position: absolute;
  right: -20px;
  top: 4px;
  background: url(../../../assets/imgs/icon-hot.773d2a0.svg) no-repeat;
  background-size: 100%;
}
/* 头部导航 e */

.el-popover{
  margin: 0!important;
  padding: 0!important;
}

.show_user_tab div{
  /* margin: 0; */
  width: 100%;
  height: 45px;
  color: #4c4c4e;
  font-size: 14px;
  line-height: 45px;
  overflow: hidden;
}
.show_user_tab div:hover{
  background-color: #F0F0F4;
  opacity: .8;
}
.show_user_tab .show_user_item>a{
  padding-left: 20px;
  color: #4c4c4e;
}

.show_user .show_user_popover .imgtitle>img{
  width: inherit;
  height: inherit;
  text-align: center;
  position: absolute;
  /* box-sizing: border-box; */
}

.el-dialog__wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
}
/* 头部导航 e   */

/* 头部背景图 s  */
.top_header{
  height: 178px;
}
.top_header .top_header_item{
  background: #42b983;
}
.top_header_backimg{
  background-image: url('../../../assets/imgs/top_headimg.jpg') ;
  background-size: cover;
  /*  背景图垂直、水平均居中  */
  background-position: center center;
  /*  背景图不平铺  */
  background-repeat: no-repeat;
  /*  让背景图基于容器大小伸缩  */
  background-size: cover;
}
/* top_right */

.top_right{
  height: 0px;
  width: 1080px;
  margin: 0 auto;
  /* background-color: #42b983; */
  display: flex;
  justify-content: flex-end;
  transform: translatey(-170px);

}

.top_right .top_right_box2{
  width: 265px;
  height: 164px;
  border-radius: 4px;
  background-color: #ffffff;
  /* border: 1px solid #333333; */
  /* transform: translatey(-172px); */
  /* float: left; */
}

.top_right .top_right_box2 .top_colum{
  display: flex;
  flex-flow: row;
  font-size: 12px;
  /* width: 265px; */
  /* height: 164px; */
  justify-content: space-between;
  padding: 6px 15px;
}
.wxmin{width: 116px;height: 116px;}
.m_top_10{margin-top: 10px;}
.font_14{font-size: 14px;}
.color_92bff6{color: #92BFF6!important;}
.top_right .top_right_box2 .top_colum .top_row_left{
  /* display: flex; */
  width: 120px;
  text-align:center;
}
.top_right .top_right_box2 .top_colum .top_row_right{
  width: 120px;
  padding-left: 15px;
  margin-left: 15px;
  border-left: #EFEFF1 1px solid;
  border-color: #EFEFF1;
}
.top_right .top_right_box2 .top_colum .top_row_right .itemd{
  margin: 10px 0;
  /* height: 16px; */
  /* width: 85px; */
  /* line-height: 16px; */
  color: #96999f;
  /* border:1px solid #333333; */
}
.top_right .top_right_box2 .top_colum .top_row_right .itemd>img{
  /* margin-top: 3px; */
  width: 16px;
  height: 16px;
  margin-right: 5px;
  transform: translateY(4px);
}


/* 头部背景图 s  */

/* body 区 s */
.top-bar{
  /* height: 126px; */
  /* background-color: #6aa2e4; */
}
.top-bar{
  padding: 20px 0 20px 0;
}

.top-bar .container{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-content: center;
}

.top-bar .container .calendar-wrap{
  width: 260px;
  height: 126px;
  background: url(../../../assets/imgs/icon_schoolcalendar.c30e320.png) no-repeat;
  background-size: 100% 100%;
  padding: 26px 8px 12px 8px;
  box-sizing: border-box;
  justify-content: space-between;
  display: flex;
  cursor: pointer;
}

.top-bar .container .calendar-wrap .calendar-left{
  width: 68px;
  height: 87px;
  padding: 8px;
  box-sizing: border-box;
}

.top-bar .container .calendar-wrap .calendar-left .calendar-month{
  font-size: 10px;
  transform: scale(0.83333);
  font-weight: 400;
  color: #899bbc;
  line-height: 14px;
  text-align: center;
}

.top-bar .container .calendar-wrap .calendar-left .calendar-day{
  font-size: 30px;
  font-weight: bold;
  color: #1c3d79;
  line-height: 41px;
  text-align: center;
}

.top-bar .container .calendar-wrap .calendar-right{
  box-sizing: border-box;
  padding: 0 5px;
  width: 170px;
  height: 87px;
}

.top-bar .container .calendar-wrap .calendar-right .calendar-item{
  width: 100%;
  height: 29px;
  box-sizing: border-box;
  border-bottom: 1px solid #edf2f7;
  display: flex;
  align-items: center;
}

.top-bar .container .calendar-wrap .calendar-right .calendar-item .calendar-icon{
  width: 14px;
  height: 14px;
  margin-right: 4px;
}

.top-bar .container .calendar-wrap .calendar-right .calendar-item .calendar-text{
  flex: 1;
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.top-bar .container .calendar-wrap .calendar-right .nodata{
  font-size: 12px;
  font-weight: 400;
  color: #c0c0c1;
  text-align: center;
  line-height: 87px;
}

.top-bar .container .search-bar{
  width: 800px;
  height: 126px;
}

.top-bar .container .search-bar .search-bar_box{
  color: #999;
  line-height: 24px;
  font-size: 12px;
  height: 24px;
  color: #606266;
  /* margin-top: 24px; */
}
.el-select .el-input{
  background-color: #ffffff!important;
}
.el-select{
  width: 90px!important;
  color: #252527!important;
  /* height: 38px; */
  /* color: #ffffff!important; */
}
.el-select .el-input .el-input__inner
{
  height: 38px;
  /* background-color: #ffffff!important; */
}

.el-button[]{
  width: 100px!important;
  color: #ffffff;
  font-size: 16px;
  background-color: #6aa2e4;
  border-radius: 0;
}
.user-count-num {
  text-align: start;
}
.search>>>.el-input-group__prepend{
  background-color: #ffffff!important;
}
.search .btnsearch{
  width: 100px;
}
.search-bar .search-bar_box>>>.el-input-group__append{
  color: #fff;
  background: #6aa2e4;
  padding: 0 40px;
}
.top-bar .container .search-bar .user-count-num{
  font-size: 12px;
  color: #333;
  /* margin: -22px 0 12px 0; */
  font-weight: 500;
}

.top-bar .container .search-bar .user-count-num span{
  display: inline-block;
  width: 15px;
  height: 17px;
  background: url(../../../assets/imgs/index_count.9f9fb38.png) repeat-y center 14px/16px 195px;
}

.top-bar .container .search-bar .user-count-num span:nth-child(1) {
  transition: all ease-out 1s;
}

.top-bar .container .search-bar .user-count-num span:nth-child(2) {
  transition: all ease-out 1.3s;
}

.top-bar .container .search-bar .user-count-num span:nth-child(3) {
  transition: all ease-out 1.6s;
}

.top-bar .container .search-bar .user-count-num span:nth-child(4) {
  transition: all ease-out 1.9s;
}

.top-bar .container .search-bar .user-count-num span:nth-child(5) {
  transition: all ease-out 2.2s;
}

.top-bar .container .search-bar .user-count-num span:nth-child(6) {
  transition: all ease-out 2.5s;
}

.top-bar .container .search-bar .user-count-num span:nth-child(7) {
  transition: all ease-out 2.8s;
}

.top-bar .container .search-bar .user-count-num span:nth-child(8) {
  transition: all ease-out 3.1s;
}

.top-bar .container .search-bar .search-container{
  width: 800px;
  height: 44px;
  position: relative;
  font-size: 14px;
  border: 1px solid #6aa2e4;
}

.top-bar .container .search-bar .search-container *{
  transition: all 0.4s;
  outline: none;
}

.top-bar .container .search-bar .hot-key-wrap{
  padding-top: 10px;
  color: #a0a0a2;
  line-height: 28px;
  font-size: 15px;
}

.top-bar .container .search-bar .hot-key-wrap a{
  display: inline-block;
  padding: 0 5px;
  color: #6aa2e4;
  cursor: pointer;
  text-decoration: none;
}
.top-bar .container .search-bar .hot-key-wrap a:hover {
  /* text-decoration: underline; */
  text-decoration: none;
}
/* .top-bar .container .search-bar .hot-key-wrap a .hideimg{ */
/*   width: 1px; */
/*   height: 1px; */
/*   display: none !important */
/* } */

/* body 区 e */
.mid-bar{
  min-height: 430px;
  width: 1080px;
  /* margin:0 auto; */
  display: flex;
  justify-content: space-between;
  /*flex-direction: row-reverse;*/
  /* border:  #333333 1px solid; */
  background-color: #FAFAFA;
  /*position: relative;*/
}

.mid-bar .intern-type{
  /*width: 260px;*/
  /*position: relative;*/
  /*width: 100%;*/
  /*border:  #333333 1px solid;*/
  min-height: 430px;
}
.mid-bar .intern-type .type-head{
  /* display: flex; */
  /* justify-content: center; */
  /* border:  #333333 1px solid; */
  /* background-color: #FAFAFA; */
}

.deepCtrl>>>#tab-zore{
  width: 155px;
  /*padding-left: 20px!important;*/
}
.deepCtrl>>>.el-tabs__nav-wrap::after{
  height: 0px;
}

.deepCtrl>>>.el-tabs__header{
  /*opacity: 0;  !* 隐藏导航条  *!*/
  margin: 0;
}
#tab-zore > span{
  padding: 0 65px 0 6px!important;
}
.deepCtrl>>>.el-tabs__item{
  padding: 0 10px!important;
}
.deepCtrl>>>.el-tabs__content{
   overflow: unset;
  position: relative;
}
.deepCtrl>>>#tab-first span,
.deepCtrl>>>#tab-second span
{
  border: 1px #cccccc solid;
  padding: 2.5px 2.5px;
  border-radius: 50%;
  background-color:  #F8F8FA ;
}
.deepCtrl>>>.el-tabs__item.is-disabled {
  color: #666;
}

.mid-bar .intern-type .type-head .type-item{
  width: 260px;
  padding: 0 0 0 15px;
  height: 45px;
  white-space: nowrap;
  line-height: 45px;
  /*font-size: 0;*/
  box-sizing: border-box;
  border: 1px solid #ffffff;
  /* border: solid 1px transparent; */
  background: #f5f7fa;
  /*position: relative;*/
  box-sizing: border-box;
  background: url(../../../assets/imgs/icon_arrow_right.9c83439.svg) no-repeat 245px 12px #fafafa;
  z-index: 2;
}

.intern-type .type-head .type-item  .type-list{
  /*position: absolute;*/
  /*display: block;*/
  padding: 6px 12px 0 16px;
  min-height: 400px;
  margin-top: -12px;
  width: 600px;
  z-index: 1;
  /*z-index: 12;*/
  transform: translate(244px ,-60px);
  box-shadow: 0px 2px 6px 2px rgb(0 0 0 / 4%);
  /*transform: translateY(-30px);*/
  background: #fff;
  /*background: #F8F8FA;*/
  border: 1px solid #e8e8ea;
  white-space: normal;
}
.intern-type .type-head .type-item .type-list .text {
  display: inline-block;
  padding-right: 12px;
  font-size: 12px;
  color: #666;
  text-decoration: none;
  line-height: 38px;
  cursor: pointer;
}
.intern-type .type-head .type-item .type-list .first-text {
  font-size: 16px;
  color: #333;
  cursor: pointer;
}
.intern-type .type-head .type-item .type-item-first{
  display: inline-block;
  color: #333;
  font-size: 16px;
  padding-right: 10px;
  cursor: pointer;
}

.mid-bar .intern-type .type-item .type-item-sub{
  display: inline-block;
  color: #666;
  font-size: 14px;
  text-decoration: none;
  line-height: 38px;
  padding-right: 12px;
  cursor: pointer;
  /*overflow: hidden;*/
}
.mid-bar .intern-type .type-item .type-item-sub span{
  /*overflow: hidden;*/
}
/*鼠标事件*/
.active{
  background-color: #fff;
  border: 1px #e8e8ea solid!important;
  border-color: #e8e8ea;
  border-right: none!important;
  /* background-color: #1c3d79!important; */
}

/* 轮播 s */
.mid-bar .el-carousel__item{
  /*z-index: 10!important;*/
}
.carousel_area{
  width: 800px;
  height:300px;
  margin-left: 20px;
}
.carousel_area>>>.el-carousel__item.is-active{
  z-index: unset;
}

/* company-area s */
.container .company-area{
  width: 1080px;
  margin: 0 auto;
  display: flex;
  /*flex-wrap: wrap;*/
  /*justify-content: start;*/
  /*margin-top:10px;*/
}
.container .company-area .company-item{
  height: 88px;
  width: 88px;
  cursor: pointer;
  border: solid 1px #eee;
  text-align: center;
   /*padding-top: 10px; */
  margin-top: 10px;
  margin-right: 16px;
  position: relative;
}
.container .company-item::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  /*z-index: 2;*/
  opacity: 0;
  top: 0;
  left: 0;
}
.company-area .company-item .com-name{
  color: #666;
  font-size: 12px;
  margin-top: 6px;
}
.company-item:hover:before,
.company-area .company-item:hover .company-common{
  opacity: 1;
}
.company-area .company-item .company-common{
  /*display: none;*/
  position: absolute;
  width: 100%;
  /*top: 0;*/
  color: #fff;
  opacity: 0;
  z-index: 3;
  padding: 0 8px;
  box-sizing: border-box;
  word-break: break-all;
}

.company-item .company-t {
top: 12px;
font-size: 14px;
line-height: 18px;
padding-bottom: 4px;
color: #fff;
}
.company-item .company-d {
  top: 34px;
  font-size: 12px;
  line-height: 16px;
  color: #eee;
}

.company-area .company-item .hideimg{
  height: 50px;
  width: 50px;
}

/* 热门职位 */
.checkjob{
  /* background: #6aa2e4; */
  height:0px;
  display: flex;
  justify-content: right;
}
.checkjob>>>.el-checkbox__inner,
.tabs>>>.el-tabs__nav-wrap::after{
 z-index: unset;
 /*z-index: 5;*/
}
.tabs>>>.el-tabs__nav-wrap::after{
  height: 0;
}
.tabs>>>.el-tabs__header{
  width: 70%;
}
.tabs>>>.el-tabs__active-bar{
  bottom: unset;top: 0; height: 3px;
}
.checkjob .checkjob_item {
  /*z-index: 2;*/
  display: flex;
  height: 38px;
  width: 30%;
  line-height: 38px;
  /*justify-content: right;*/
  align-content: baseline;
  /*flex-direction: row-reverse;*/
  /*border-bottom: 2px solid;*/
  /*border-bottom-color: #E4E7Ed;*/
}

.checkjob .checkjob_item .checkjob_more{
  cursor: pointer;
  margin-left: 20px;
  font-size: 12px;
  padding: 0 12px;
  color: #999999;
  text-decoration: none;
  background: url(../../../assets/imgs/icon_arrow_right.9c83439.svg) no-repeat 230px 12px #fafafa;
}

.jboarea{
  width: 1080px;
  height: 100%;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  /*justify-content: flex-start;*/
  /* background-color: red; */
}
.jboarea .jbobox{
  width: 308px!important;
  height: 230px!important;
  border: 1px solid #eaeaea;
  background-color: #ffffff;
  padding: 0 20px;
  margin-top: 15px;
}
.jboarea .jbobox:nth-of-type(even){
  /*margin-left: 14px;*/
  /*margin-right: 14px;*/
}
.tm{
  width: 200px;height: 200px;
  border: #42b983 1px solid;
  margin-top: 10px;
}
.jbobox{
  /* display: flex; */
  /* width: 350px!important; */
  /* height: 230px!important; */
  /* flex-direction: column; */
  /* align-content: center; */
  /* flex-direction: row; */
  /* float: right; */
  /* border: 1px solid #eaeaea; */
  /* background-color: #ffffff; */
}
.jbobox .jbobox_up{
  /* display: flex; */
  width: 308px;
  padding: 28px 0;
  border-bottom: 1px dashed #eaeaea;
}
.jbobox .jbobox_up .jbobox_up1 ,.jbobox_up2,.jbobox_up3 {
  display: flex;
}
.jbobox .jbobox_up .jbobox_up1 ,.jbobox_up2,.jbobox_up3 span {
  flex: 1;
  /*padding: 0 10px;*/
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.color_red8150{
  color: #fd8150;
}
.jbobox .jbobox_up .jbobox_up1 {
  justify-content: space-between;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  text-overflow: ellipsis;
}
.jbobox .jbobox_up .jbobox_up2{
  justify-content: space-around;
  margin:10px 0;
  color: #888;
  font-size: 13px;
}
.jbobox .jbobox_up .jbobox_up3{
  justify-content: space-between;
  font-size: 14px;
  color: #666;
}

.jbobox .jbobox_dw{
  margin: 21px 0;
  width: 308px;
  height: 65px;
  display: flex;
}
.jbobox_dw{
  height: 50px;
  width: 50px;
}
.jbobox_dw .jbobox_dw1 img{
  width: 50px;
  height: 50px;
}
.jbobox_dw2{
  /* display: flex; */
  flex-direction: column;
  justify-content:space-between;
  padding: 4px 20px;
  color: #b2b2b2;
  font-size: 14px;

}
.jbobox_dw2 .dw{
  display: flex;
  color: #6aa2e4;
  padding-bottom:4px;
  align-content: space-between;
}
.jbomore {
  /* width:176px; */
  /* height: 46px; */
  margin-top: 30px;
  margin-bottom:150px;
}
.jbomore a{
  margin-top: 22px;
  padding: 12px 50px;
  background: #6aa2e4;
  border-radius: 0px;
  color: #fff;
  font-size: 16px;
  width: 170px;
  height: 46px;
  line-height: 46px;
}
</style>
